<template>
	<view>
		<view class="search">
			<!-- <view class="search-location">
				青岛市|市北区
			</view> -->
			<view class="search-input">
				<image src="../../../static/search-icon.png" mode="" style="width: 33upx;height: 33upx;margin-right: 10upx;"></image>
				<input type="text" style="flex: 1;color: #ffffff;" placeholder="请输入您要查找的门店名称" placeholder-class="search-placeholder" v-model="keyword"/>
				<view class="search-button" @click="searchShop">搜索</view>
			</view>
		</view>
		<view class="shop-list">
			<view class="shop-item" @click="showShopPage(shop.id)" v-for="(shop,key) in shops" :key="key">
				<view class="shop-head">
					<text class="shop-name">{{shop.name}}</text>
					<text class="shop-time">营业时间：{{shop.work_time}}</text>
				</view>
				<view class="shop-info">
					<image src="../../../static/location.png" mode="" style="width: 22upx;height: 22upx;margin-right: 10upx;"></image>
					<view class="shop-position">
						{{shop.distance}}km
					</view>
					
				</view>
				<view class="shop-score">
					<view class="shop-environment">
						<view class="shop-score-number">
							{{shop.environment_score}} 
						</view>
						<view class="shop-score-detail">
							<view class="shop-score-label">
								门店环境
							</view>
							<view class="shop-score-star">
								<block v-for="i in 5" :key="i">
									<image src="../../../static/star.png" mode="" style="width: 24upx;height: 24upx;" v-if="i<=shop.environment_score-1"></image>
									<image src="../../../static/star-line.png" mode="" style="width: 24upx;height: 24upx;" v-else></image>
								</block>
							</view>
						</view>
					</view>
					<view style="width: 33upx;"></view>
					<view class="shop-service">
						<view class="shop-score-number">
							{{shop.service_score}}
						</view>
						<view class="shop-score-detail">
							<view class="shop-score-label">
								服务评价
							</view>
							<view class="shop-score-star">
								<block v-for="i in 5" :key="i">
									<image src="../../../static/star.png" mode="" style="width: 24upx;height: 24upx;" v-if="i<=shop.service_score-1"></image>
									<image src="../../../static/star-line.png" mode="" style="width: 24upx;height: 24upx;" v-else></image>
								</block>
							</view>
						</view>
					</view>
				</view>
				<view class="staff">
					<view class="staff-title">
						<image src="../../../static/user-white.png" mode="" style="width: 36upx;height: 40upx;margin-right: 10upx;"></image>
						健康管理师
						<view class="dot">
							{{shop.staffs.length}}
						</view>
					</view>
					<scroll-view class="staff-scroll" scroll-x="true">
						<view class="staff-list">
							<view class="staff-item" @click.stop="showStaffPage(staff.id,shop.id)" v-for="(staff,index) in shop.staffs" :key="index">
								<image :src="staff.avatar?staff.avatar:'../../../static/logo.png'" mode="" class="staff-avatar"></image>
								<view class="staff-name">
									{{staff.nickname}}
								</view>
								<view style="width: 240upx;"></view>
							</view>
							
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniIcon from '../../../components/uni-icon.vue'
	export default {
		data() {
			return {
				shops:[],
				keyword:"",
				latitude:"",
				longitude:"",
			};
		},
		onPullDownRefresh:function(){
			this.checkAuth();
		},
		onLoad:function(){
			this.checkAuth();
		},
		methods:{
			showStaffPage:function(staff_id,shop_id){
				uni.navigateTo({
					url:"/pages/staff/info/info?staff_id="+staff_id+"&shop_id="+shop_id 
				})
			},
			showShopPage:function(id){
				uni.navigateTo({
					url:"/pages/shop/info/info?id="+id
				})
			},
			checkAuth:function(){
				var that=this;
				uni.getSetting({
					success:function(res){
						console.log(res);
						if(!res.authSetting['scope.userLocation']){
							uni.authorize({
								scope:"scope.userLocation",
								success:function(res){
									that.getLocation();
								},
								fail:function(res){
									uni.showModal({
										title:"无定位权限",
										content:"我们需要您的位置信息推进门店",
										confirmText:"设置权限",
										success:function(e){
											if(e.confirm){
												uni.openSetting({
													success:function(res){
														if(res.authSetting['scope.userLocation']==true){
															that.getLocation();
														}else{
															that.checkAuth();
														}
													}
												})
											}
										}
									})
								}
							})
						}else{
							that.getLocation();
						}
					}
				})
			},
			getLocation:function(){
				uni.showLoading({
					title:"获取推荐门店"
				});
				var that=this;
				
				uni.getLocation({
					type:"gcj02",
					complete:function(e){
						uni.hideLoading();
						uni.stopPullDownRefresh();
						that.latitude=e.latitude;
						that.longitude=e.longitude; 
						that.getRecommendShop();
					},
					fail:function(){
						uni.hideLoading();
						uni.stopPullDownRefresh();
						uni.showModal({
							title:"位置信息获取失败",
							content:"请手动选择位置",
							confirmText:"手动选择",
							success:function(e){
								if(e.confirm){
									uni.chooseLocation({
										success:function(e){
											that.latitude=e.latitude;
											that.longitude=e.longitude; 
											that.getRecommendShop();
										}
									}) 
								}
							}
						})
					}
				})
			},
			searchShop:function(){
				var that=this;
				uni.showLoading({
					title:"搜索中"
				})
				that.ajax("/shop/search/",{
					"latitude":that.latitude,
					"longitude":that.longitude,
					"keyword":that.keyword
				},function(res){
					if(res.data.data.length>0){
						that.shops=res.data.data;
					}else{
						that.shops=[];
					}
				});
			},
			getRecommendShop:function(){
				var that=this;
				that.ajax("/shop/nearby/",{
					"latitude":that.latitude,
					"longitude":that.longitude,
					"count":10,
					"type":1
				},function(res){
					if(res.data.data.length>0){
						that.shops=res.data.data;
					}else{
						that.shops=[];
					}
					uni.stopPullDownRefresh();
				});
			},
		},
		components: {
			uniIcon
		},
	}
</script>

<style>
.search{
	background: #478E7E;
	display: flex;
	padding: 16upx 28upx;
	flex-direction: row;
	align-items: center;
}
.search-location{
	height: 56upx;
	background: rgba(255,255,255,0.58);
	border-radius: 28upx;
	color: #FAFAFA;
	font-size: 24upx;
	line-height: 56upx;
	padding: 0 20upx;
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-right: 20upx;
}
.search-input{
	flex: 1;
	height: 56upx;
	background: rgba(255,255,255,0.58);
	color:#FAFAFA;
	border-radius: 28upx;
	font-size: 24upx;
	line-height: 56upx;
	padding: 0 10upx;
	display: flex;
	flex-direction: row;
	align-items: center;
}
.search-placeholder{
	color:#FAFAFA;
}
.search-button{
	background:#45AA8C;
	height: 48upx;
	color: #ffffff;
	border-radius: 27upx;
	line-height: 48upx;
	padding: 0 20upx;
}
.shop-list{
	padding:20upx;
	
}
.shop-item{
	padding: 30upx;
	background: url(http://demo.yufeinong.com/static/images/store_background.png);
	background-size: cover;
	background-repeat: no-repeat;
	border-radius: 20upx;
	margin-bottom: 20upx;
}
.shop-head{
	display: flex;
	flex-direction: row;
}
.shop-name{
	font-size: 28upx;
	color: #FFDBB0;
	
}
.shop-time{
	color: #ffffff;
	flex: 1;
	text-align: right;
	font-size: 24upx;
}
.shop-info{
	display: flex;
	flex-direction: row;
	align-items: center;
	font-size: 24upx;
	
}

.shop-position{
	color: #ffffff;
}
.shop-score{
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-top: 20upx;
	font-weight: 600;
}
.shop-environment{
	flex: 1;
	display: flex;
	flex-direction: row;
	padding: 24upx;
	align-content: center;
	align-items: center;
	background: #F7FFFA;
	border-radius:12px;
}
.shop-service{
	flex: 1;
	display: flex;
	flex-direction: row;
	padding: 24upx;
	align-content: center;
	align-items: center;
	background: #F7FFFA;
	border-radius:12px;
}
.shop-score-number{
	font-size: 48upx;
	color:#FF7465;
	margin-right: 16upx;
}
.shop-score-detail{
	display: flex;
	flex-direction: column;
	align-content: center;
	padding:20upx 0;
}
.shop-score-label{
	font-size: 28upx;
	color:#4B4B4B;
	line-height: 28upx;
	
}
.shop-score-star{
	height: 24upx;
	display: flex;
}
.staff{
}
.staff-title{
	margin-top: 20upx;
	display: flex;
	flex-direction: row;
	align-items: center;
	color: #ffffff;
	font-size: 28upx;
}
.dot{
	background: #FF7465;
	height: 28upx;
	line-height: 28upx;
	font-size: 18upx;
	padding: 0 15upx;
	margin-left: 8upx;
	border-radius: 15upx;
	color: #ffffff;
}
.staff-scroll{
	margin-top: 20upx;
}
.staff-list{
	display: flex;
	flex-direction: row;
	padding: 10upx;
}
.staff-item{
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20upx 0;
	border-radius: 24upx;
	margin-right: 20upx;
	background: #ffffff;
	width: 218upx;
}
.staff-avatar{
	width: 116upx;
	height: 116upx;
	border-radius: 58upx;
	
}
.staff-name{
	margin-top: 14upx;
	font-size: 24upx;
	color: #4B4B4B;
	overflow: hidden;
	white-space: nowrap;
}
</style>
